<template>
  <div class="top">
    <div class="top__title">
      <span @click="handleBack" class="iconfont top__title__icon"
        >&#xe697;</span
      >
      <span class="top__title__txt">确认订单</span>
    </div>
    <div class="top__receiver">
      <p class="top__receiver__addr">收货地址</p>
      <template v-if="!hasAddId">
        <p class="top__receiver__address" @click="handleSelectAddress">
          请选择收获地址
        </p>
      </template>
      <template v-else>
        <div @click="handleSelectAddress">
          <p class="top__receiver__address">
            {{ addData.city }}{{ addData.department }}{{ addData.houseNumber }}
          </p>
          <p class="top__receiver__info">
            <span>{{ addData.name }}</span> <span>{{ addData.phone }}</span>
          </p>
        </div>
      </template>

      <span class="iconfont top__receiver__mark">&#xe697;</span>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { onBeforeMount, reactive } from "vue";
import { get } from "@/API/axios.js";
export default {
  name: "topArea",
  setup() {
    const router = useRouter();
    const route = useRoute();
    //获取地址参数
    const AddId = route.query.addId;
    const hasAddId = !!AddId;

    //返回上一页
    const handleBack = () => {
      router.back();
    };

    //跳转地址选择
    const handleSelectAddress = () => {
      router.push(`/addressselect?path=${route.path}`);
    };

    //如果有地址选择，则获取地址数据
    const addData = reactive({});
    onBeforeMount(async () => {
      if (!hasAddId) return;
      const res = await get(`/api/user/address/${AddId}`);
      if (res.errno === 0) {
        let { data } = res;
        addData.city = data.city;
        addData.department = data.department;
        addData.houseNumber = data.houseNumber;
        addData.name = data.name;
        addData.phone = data.phone;
      }
    });

    return { handleBack, AddId, hasAddId, handleSelectAddress, addData };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.top {
  padding-top: 0.4rem;
  &__title {
    color: #fff;
    position: relative;
    &__icon {
      font-size: 0.22rem;
    }
    &__txt {
      font-size: 0.16rem;
      position: absolute;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
    }
  }
  &__receiver {
    margin-top: 0.22rem;
    position: relative;
    width: 3.4rem;
    height: 1.1rem;
    background-color: #fff;
    border-radius: 0.04rem;
    padding: 0.16rem 0.16rem 0.16rem 0.16rem;
    &__addr {
      line-height: 0.34rem;
      font-size: 0.16rem;
      color: $content-color;
      font-weight: 600;
    }
    &__address {
      line-height: 0.22rem;
      font-size: 0.14rem;
      color: $content-color;
    }
    &__info {
      line-height: 0.18rem;
      font-size: 0.12rem;
      color: $medium-font-color;
    }
    &__mark {
      position: absolute;
      right: 0.1rem;
      top: 30%;
      font-size: 0.22rem;
      transform: rotate(-180deg) translate3d(0, -50%, 0);
    }
  }
}
</style>
